<template>
  <div id="water-level-chart">
    <div class="water-level-chart-title">{{ date }}</div>

    <div class="water-level-chart-details">当前水位<span>10</span>米</div>

    <div class="chart-container">
      <dv-water-level-pond :config="config" />
    </div>
  </div>
</template>

<script>
export default {
  name: "WaterLevelChart",
  data() {
    return {
      config: {
        data: [45],
        shape: "round",
        waveHeight: 25,
        waveNum: 2,
      },
      date: "2021-08-19",
    };
  },
  mounted() {
    this.updateDate();
  },
  methods: {
    updateDate() {
      const _this = this;
      setInterval(() => {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var hour = date.getHours();
        var minutes = date.getMinutes();
        var seconds = date.getSeconds();
        _this.date =
          year +
          "-" +
          month +
          "-" +
          day +
          " " +
          hour +
          ":" +
          minutes +
          ":" +
          seconds;
      }, 1000);
    },
  },
};
</script>

<style >
#water-level-chart {
  width: 20%;
  box-sizing: border-box;
  margin-left: 0px;
  background-color: rgba(6, 30, 93, 0.5);
  border-top: 2px solid rgba(1, 153, 209, 0.5);
  display: flex;
  flex-direction: column;
}
#water-level-chart .water-level-chart-title {
  font-weight: bold;
  height: 50px;
  display: flex;
  align-items: center;
  font-size: 20px;
  justify-content: center;
}

#water-level-chart .water-level-chart-details {
  height: 15%;
  display: flex;
  justify-content: center;
  font-size: 17px;
  align-items: flex-end;
}
#water-level-chart .water-level-chart-details span {
  font-size: 35px;
  font-weight: bold;
  color: #58a1ff;
  margin: 0 5px;
  margin-bottom: -5px;
}
#water-level-chart .chart-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

#water-level-chart .dv-water-pond-level {
  max-width: 90%;
  width: 200px;
  height: 200px;
  border: 10px solid #19c3eb;
  border-radius: 50%;
}
#water-level-chart .dv-water-pond-level ellipse {
  stroke: transparent !important;
}

#water-level-chart .dv-water-pond-level text {
  font-size: 40px;
}
#water-level-chart .chart-container {
  position: relative;
  top: 0px;
  left: 120px;
  background-color: rgba(25, 197, 235, 0);
}
</style>
